<template>
    <a-card class="password-change-card" title="修改密码">
        <a-form @submit.prevent="handleSubmit">
            <div class="form-item">
                <a-form-item label="原密码" class="form-label">
                    <a-input-password v-model:value="form.oldPassword" placeholder="请输入原密码" class="input-field" />
                </a-form-item>
            </div>
            <div class="form-item">
                <a-form-item label="新密码" class="form-label">
                    <a-input-password v-model:value="form.newPassword" placeholder="请输入新密码" class="input-field" />
                </a-form-item>
            </div>
            <div class="form-item">
                <a-form-item label="重复新密码" class="form-label">
                    <a-input-password v-model:value="form.confirmPassword" placeholder="请再次输入新密码" class="input-field" />
                </a-form-item>
            </div>
            <div class="button-group">
                <a-button type="primary" html-type="submit">确定</a-button>
                <a-button @click="handleCancel">取消</a-button>
            </div>
        </a-form>
    </a-card>
</template>

<script>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import request from '../../../util/request';

export default {
    setup() {

        const router = useRouter();

        const form = ref({
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
        });

        const handleSubmit = () => {
            //console.log('当前表单数据:', form.value); // 打印当前表单数据
            // 在这里可以进行密码修改的逻辑处理
            if (form.value.newPassword !== form.value.confirmPassword) {
                // 提示新密码与确认密码不一致
                message.error('新密码与重复新密码不一致！');
                return;
            }
            request.post('/account/changePwd', {
                userid: sessionStorage.getItem('userid'),
                role: 'business',
                oldpassword: form.value.oldPassword,
                newpassword: form.value.newPassword,
            }).then(res => {
                if (res.data.flag === 'success') {
                    message.success('密码修改成功！');
                    message.info('正在转回登录界面，请重新登录！');
                    sessionStorage.removeItem('userid');
                    sessionStorage.removeItem('role');
                    setTimeout(() => {
                        router.push({ name: 'Login' });
                    }, 1000);
                }
                else if (res.data.flag === 'incorrect') {
                    message.error('原密码错误！');
                } else {
                    message.error('密码修改失败！请稍后重试或联系管理员');
                }
            }).catch(err => {
                message.error('密码修改失败: ', err);
            });

        };

        const handleCancel = () => {
            resetForm();
            // 跳转到其他页面
            router.push({ name: 'BusInfoViewer' });
        };

        const resetForm = () => {
            form.value.oldPassword = '';
            form.value.newPassword = '';
            form.value.confirmPassword = '';
        };

        return {
            form,
            handleSubmit,
            handleCancel,
        };
    },
};
</script>

<style scoped>
.password-change-card {
    max-width: 400px;
    /* 设置卡片宽度 */
    margin: 20px auto;
    /* 居中显示 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
    display: flex;
    align-items: center;
    /* 垂直对齐 */
    margin-bottom: 16px;
    /* 控件之间的间距 */
}

.form-label {
    flex: 0 0 120px;
    /* 固定 Label 的宽度 */
    text-align: left;
    /* Label 左对齐 */
}

.input-field {
    flex: 1;
    /* 文本框占据剩余空间 */
    min-width: 250px;
    /* 设置最小宽度 */
    margin-left: auto;
    /* 文本框框体右对齐 */
}

.button-group {
    display: flex;
    justify-content: space-between;
    /* 按钮之间的间距 */
    margin-top: 20px;
    /* 按钮与表单之间的间距 */
}
</style>